<template>
  <view>
    <view class="account_popup">
      <view class="account_popup_top">
        <text>授权车辆（{{ accountCars.length }}）</text>
        <text @click="addCard()">添加车辆</text>
      </view>
      <scroll-view scroll-y="true" :style="{ height: '125px' }">
        <view class="scroll">
          <view class="scrolls" v-for="item in carLists" :key="item.id" @click.stop="addCarBy(item.cart_code, item.id)">
            <text>{{ item.cart_code }}</text>
            <view
              class="scrolla"
              :style="{
                display: accountCars && accountCars.find((items) => items == item.cart_code) ? 'flex' : 'none',
              }"
            >
              <uni-icons type="checkmarkempty" color="#fff" size="15"></uni-icons>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="account_popup_bottom">
        <text @click.stop="cancel()">取消</text>
        <text @click="submitCar()">确认</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { carList } from '@/gql/carAuthorized';
import { getDriverID } from '@/stores/driverID';
import { showLoading } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import type { Ref } from 'vue';
import { ref } from 'vue';

const driver_id = getDriverID();
const carLists: Ref<object[]> = ref([]);

const repeat = ref(true)//放重复点击
defineProps({
  accountCars: {
    type: Array,
  },
});
function init() {
   showLoading('加载中');
  const payload = {
    query: carList,
    variables: {
      from_driver_id: 0,
      driver_id,
    },
  };
  if(!repeat.value){
    return
  }
  repeat.value=false
  toPublish('ql/driver/getCartList', payload, (obj: any) => {
    repeat.value=true
    const { data } = obj;
    carLists.value = data.cart_list;
  });
}
init();
const emit = defineEmits(['cancel', 'addCarBy', 'submitCar','addCard']);
function cancel() {
  emit('cancel');
}
/**
 * 添加车辆
 */
function addCard() {
   emit('addCard');
}
/**
 * 授权车辆
 */
function addCarBy(code, id) {
  emit('addCarBy', {
    num: code,
    id: id,
  });
}
/**
 * 确认添加授权车辆信息
 */
function submitCar() {
  emit('submitCar');
}
defineExpose({
  init
});
</script>

<style scoped lang="less">
@import url('../authorized/less/carList.less');
</style>
